//引入js
import $ from 'jquery'
//引入样式
import './index.less';
import './css/demo.css';
//引入字体图标
import './iconfont/iconfont.css'

import print from "./js/print";
/*
* 运行指令
* 开发环境 webpack ./src/index.js -o ./build/build.js --mode=development
*
* 生产环境 webpack ./src/index.js -o ./build/build.js --mode=production
* */
$('.box').click(()=>{
    $('body').css('backgroundColor','deeppink')
})
function add(x,y){
    return x+y;
}
console.log(add(1,4));
print();
//判断是否启用了HMR功能
if(module.hot){
    //module.hot为true --->让HMR功能代码生效
    module.hot.accept('./js/print.js',function (){
        //方法会监听print.js文件的变化，一旦变化，其他模块不会被重新打包,会执行以下回调函数
        print();
    })
}

/*
   code split
* 通过js代码，让某个文件单独打包成一个chunk
* import动态导入语法：能将某个文件单独打包-->此方法也可以用来懒加载（文件需要时再加载）
    webpackChunkName:'test'单独打包后命名
    预加载：webpackPrefetch:true;会在使用之前加载js文件，等其他资源加载完毕后，浏览器空闲了，再加载（慎用，低版浏览器不支持）
* */
// import (/*webpackChunkName:'test'*/'./print')
//     .then(({print})=>{
//         print();
//     })
//     .catch(()=>{
//         console.log('文件加载失败')
//     })


/*
    PWA：渐进式网络开发应用程序(离线可访问)
* 1、eslint不认识window、navigator全局变量
*   解决：修改package.json中eslintConfig配置
*      "env":{
*           "browser": true //支持浏览器端全局变量
*       }
* 2、serviceWorker代码必须运行在服务器上
*      可以用node.js写一个服务器
*      安装server npm i server -D
*      serve -s build 启动服务器，将build目录下的所有静态资源暴露出去
* */
   // 注册serviceWorker
   // 处理兼容性问题
// if('serviceWorker' in navigator){
//     window.addEventListener('load',()=>{
//         navigator.serviceWorker
//             .register('/service-worker.js')
//             .then(()=>{
//                 console.log('sw注册成功了');
//             })
//             .catch(()=>{
//                 console.log('sw注册失败了');
//             })
//
//     })
// }
